<div *ngIf="isrootChild">
    <div *ngIf="isNull == true">
        <form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
            <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                <div nz-col [nzSpan]="8" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label for="name">操作员姓名</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="operators.operatorName" name="operatorName" [nzSize]="'large'" [nzPlaceHolder]="'操作员姓名'" nzId="operatorName"></nz-input>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="8" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label for="name">登陆用户名</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-input [(ngModel)]="operators.userId" name="userId" [nzSize]="'large'" [nzPlaceHolder]="'登陆用户名'" nzId="userId"></nz-input>
                        </div>
                    </div>
                </div>
                <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label for="status">操作员状态</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-select style="width:100%" [(ngModel)]="operators.operatorStatus" nzAllowClear name="status" name="operatorStatus" [nzSize]="'large'" [nzPlaceHolder]="'操作员状态'" nzId="operatorStatus">
                                <nz-option  *ngFor="let i of operType; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label for="status">员工状态</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-select style="width:100%" [(ngModel)]="operators.empStatus" nzAllowClear name="status" name="empStatus" [nzSize]="'large'" [nzPlaceHolder]="'员工状态'" nzId="empStatus">
                                <nz-option  *ngFor="let i of roleType; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <!--<div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-label><label for="updatedAt">隶属机构</label></div>
                        <div nz-form-control class="flex-1">
                            <nz-select style="width:100%" [(ngModel)]="operators.guidOrg" name="guidOrg" [nzSize]="'large'" [nzPlaceHolder]="'隶属机构'" nzId="guidOrg">
                                <nz-option  *ngFor="let i of affiliation; let app = index" [nzLabel]="i.text" [nzValue]="i.key"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>-->
                <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                    <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                    <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
                    <a (click)="expandForm=!expandForm">
                        {{expandForm ? '收起' : '展开'}}
                        <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                    </a>
                </div>
            </div>
        </form>
        <!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
        <app-list (addCreat)="addHandler($event)"
                  [selectedRows]="selectedRows"
                  (buttonData)="buttonDataHandler($event)"
                  (pageNumber)="monitorHandler($event)"
                  (deleatData)="deleatData($event)"
                  (isActive)="isActive($event)"
                  (selectedRow)="selectedRow($event)"
                  (buttonEvent)="buttonEvent($event)"
                  (deleteBatch)="deleteBatch($event)"
                  [initDate] = "data"
                  [buttons]="buttons"
                  [headerDate] = "headerData"
                  [moreData] = "moreData"
                  [loading]="loading"
                  [configTitle]="configTitle"
                  [total]="total">

        </app-list>

        <!--引入列表组件-->
    </div>
    <nz-modal [nzVisible]="roleAddModal" [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="assignRole" [nzConfirmLoading]="loading" [nzContent]="roleContent"
              (nzOnCancel)="roleAddModal=false" (nzOnOk)="subAddrole()">
        <ng-template #roleContent>
            <div nz-row [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
                <div nz-col [nzSpan]="6" [nzPush]="1" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-control class="flex-1">
                            <nz-radio-group [(ngModel)]="selectType"  (ngModelChange)="selectChange(selectType)">
                                <label nz-radio [nzValue]="'empName'">
                                    <span>按姓名</span>
                                </label>
                                <label nz-radio [nzValue]="'org'">
                                    <span>按机构</span>
                                </label>
                            </nz-radio-group>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="8"  *ngIf="selectType === 'org'"  class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-control class="flex-1">
                            <nz-select style="width:100%" [(ngModel)]="orgCode" nzAllowClear (ngModelChange)="selectorgorgChange(orgCode)"  name="orgCode" [nzSize]="'large'" [nzPlaceHolder]="'选择组织机构'" nzId="orgCode">
                                <nz-option  *ngFor="let i of orgList; let idx = index" [nzLabel]="i.orgName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="8"  *ngIf="selectType === 'org' && orgCode !== ''"  class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-form-control class="flex-1">
                            <nz-select style="width:100%" [(ngModel)]="orgCodeChild" nzAllowClear (ngModelChange)="selectorgChange(orgCodeChild)"  name="orgCode" [nzSize]="'large'" [nzPlaceHolder]="'选择子机构'" nzId="orgCode">
                                <nz-option  *ngFor="let i of orgChildList; let idx = index" [nzLabel]="i.orgName" [nzValue]="i.guid"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
            </div>
            <nz-transfer
                [nzDataSource]="list"
                nzShowSearch
                [nzTitles]="['可选成员', '已选成员']"
                [nzListStyle]="{'width.%': 44, 'height.px': 500}"
                [nzFilterOption]="filterOption"
                (nzSearchChange)="searchpro($event)"
                (nzSelectChange)="select($event)"
                (nzChange)="change($event)"
            >
                <ng-template #render let-item>
                    {{item.description}}({{item.userId}})
                </ng-template>

            </nz-transfer>
        </ng-template>
    </nz-modal>

    <div  *ngIf="isNull == false">
        <div nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">

            <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
                <h3 style="font-weight:bold;margin-bottom: 15px;">还没有任何角色成员</h3>
                <p class="height-50">
                    <button nz-button [nzType]="'primary'" (click)="addHandler('add')">
                        <i class="anticon anticon-plus"></i>
                        <span>添加角色成员</span>
                    </button>
                </p>

            </div>

        </div>
    </div>
</div>


<div *ngIf="!isrootChild">
    <div  nz-row [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
        <div nz-col [nzSpan]="24" style="margin: 5rem 0 14rem;text-align:center">
            <h3 style="font-weight:bold;margin-bottom: 15px;">请选择一个角色</h3>
        </div>
    </div>
</div>
